<template>
  <div class="my_order">
    <div class="main">
        <!-- 主体区域左侧 -->
        <div class="main_left">
            <!-- 个人信息:头像、昵称、账号 -->
            <div class="person">
                <div class="avatar"><img :src="avatarUrl"></div>
                <div class="nickname">{{ nickname }}</div>
                <div class="username">{{ username }}</div>
                <div class="updateUser" @click="updateUserInfo"><i class="iconfont icon-shezhi"></i>修改个人信息></div>
                <!-- 个人信息编辑表单 -->
                <el-dialog title="修改个人信息" :visible.sync="userInfoFormVisible">
                    <el-form :model="form">
                        <el-form-item label="头像" :label-width="formLabelWidth">
                            <el-upload
                                class="avatar-uploader"
                                :action="'http://localhost:9090/file/upload'"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                            >
                                <img v-if="form.avatarUrl" :src="userForm.avatarUrl" class="avatar" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <img :src="imgSrc" v-show="false"/>
                        </el-form-item>
                        <el-form-item label="昵称" :label-width="formLabelWidth">
                            <el-input v-model="userForm.nickname" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-button type="primary" size="large" @click="updatePassword" style="margin-left:120px">修改密码</el-button>
                        <el-form-item label="请输入新密码" :label-width="formLabelWidth" v-show="updateMima">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="userInfoFormVisible = false" size="large">取 消</el-button>
                        <el-button type="primary" @click="userInfoFormVisible = false" size="large">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
            <div class="abilities">
                <div style="width:100%;height: 1.6vw;line-height: 1.6vw;font-size: 1.2vw;color:red;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">全部功能</div>
                <div v-for="(ability,index) in abilities" :key="index" class="ability" @click="goto(index)">
                {{ ability }}
                </div>
            </div>
            <!-- <div class="set">
                <i class="iconfont icon-shezhi"></i>设置
            </div> -->
        </div>

        <!-- 主体区域中间 -->
        <div class="main_middle">
            <div class="middle_top">
                <!-- 收货地址 -->
                <div class="person_address">
                    <el-button type="primary" style="width:6.27vw;height: 1.97vw;margin-top: 5px;margin-left: 1.1vw;font-size: 1vw;" @click="addAddress">新建地址</el-button>
                    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" >
                        <el-form :model="form" style="overflow:hidden">
                            <!-- 省/市/县 -->
                            <el-form-item label="省/市/县" label-width="120px">
                                <el-cascader style="width:200px;" :options="options" 
                                    v-model="form.selectedOptions" @change="addressChoose"></el-cascader>
                            </el-form-item>
                            <!-- 详细地址 -->
                            <el-form-item label="详细地址" label-width="120px">
                                <el-input v-model="form.address" autocomplete="off" style="width:200px;"></el-input>
                            </el-form-item>
                            <!-- 收件人姓名 -->
                            <el-form-item label="收件人姓名" label-width="120px">
                                <el-input v-model="form.name" autocomplete="off" style="width:180px;"></el-input>
                            </el-form-item>
                            <!-- 收件人电话号码 -->
                            <el-form-item label="电话号码" label-width="120px" style="width:300px;">
                                <el-input v-model="form.phoneNumber" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="cancle" style="width:80px;height: 30px;">取 消</el-button>
                            <el-button type="primary" @click="sure" style="width:80px;height: 30px;">确 定</el-button>
                        </div>
                    </el-dialog>
                    <div class="address_list">
                        <div class="address_item" v-for="(item,index) in addressList" :key="index">
                            <div class="item_text">
                                <span>{{ item.province }}-</span>
                                <span>{{ item.address }}-</span>
                                <span>{{ item.name }}-</span>
                                <span>{{ item.phoneNumber }}</span>
                            </div>
                            <div class="item_operation">
                                <el-button type="warning" @click="editAddress(index)">编辑</el-button>
                                <el-popconfirm
                                    style="margin-left: 5px;margin-top: -7px;font-size: 20px;"
                                    confirm-button-text='确定'
                                    cancel-button-text='我再想想'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="您确定将此地址删除吗？"
                                    @confirm="handleDelete(index)"
                                >
                                    <el-button type="danger" slot="reference">删除 </el-button>
                                </el-popconfirm>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="middle_body">
                <div class="state_list">
                    <a href="#" class="state" 
                    v-for="(item,index) in stateList" 
                    :key="index" 
                    :class="{'active' : item.isActive}"
                    @click="getOrder(index)"
                    >{{ item.name }}</a>
                </div>
                <div class="order_list">
                    <div class="order_item" v-for="order in orderList" :key="order.orderId">
                        <div style="font-size:1vw;">订单号:{{ order.orderId }}</div>
                        <div style="font-size:1vw;">物品信息:{{ order.orderDetail }}</div>
                        <div style="font-size:1.2vw;color:red">订单价格:￥{{ order.orderPrice }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主体区域右侧 -->
        <div class="main_right">
            <div class="my_calendar">
                <div style="width:100%;height:2.63vw;background-color: rgb(110,200,132);text-align: center;color: white;line-height: 2.63vw;">我的日历</div>        
                <div style="width:100%;height: 6.58vw;background-color:rgb(248,255,250) ;color: #55b46c;font-size: 5vw;text-align: center;line-height: 6.58vw;">{{ time.dd }}</div>
                <div style="width:100%;height: 1.97vw;background-color:rgb(248,255,250) ;text-align: center;color: #55b46c;line-height: 1.97vw">{{ time.week }}</div>
                <div style="width:100%;height: 1.97vw;background-color:rgb(248,255,250) ;text-align: center;color: #55b46c;line-height: 1.97vw">{{ time.yy }}.{{ time.mm }}</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { getUserId} from '@/utils/getUserId'
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data";
import { Base64 } from "@/utils/base64";
export default {
    data(){
        return{
            //#region (个人信息展示)
            avatarUrl:'',
            nickname:'',
            username:'',
            user:{},
            //#endregion

            // 编辑信息表单
            userInfoFormVisible: false,
            updateAvatar:'',
            imgSrc:'',
            userForm: {},
            updateMima:false,
          
            abilities:[
                '已购买到的宝贝',
                '购买过的店铺',
                '我的发票',
                '我的收藏',
                '我的积分',
                '我的优惠信息',
                '评价管理',
                '退款维权',
                '我的足迹',
                '流量钱包',
            ],

            //#region ( 收货地址)
            // 省市区级联
            options: regionDataPlus,
            // selectedOptions: [],
            // 收货地址列表
            addressList:[],
            dialogFormVisible: false,
            form: {
                selectedOptions: [],
                province:'',
                address:'',
                name:'',
                phoneNumber:'',
            },
            operation:'',
            editFlag:0,
            formLabelWidth: '120px',
            stateList:[],
            userId:0,
            orderState:'',
            orderList:[],
            //#endregion
            time:{}
        }
    },
    methods:{
        // 获取用户信息
        async getUser(){
            let user=JSON.parse(sessionStorage.getItem('user'))
            let token=user.token
            let id =getUserId(token)
            let res=await this.request.get('/user/'+`${id}`)
            console.log('res.data:',res.data);
            let {avatarUrl,username,nickname}=res.data
            this.avatarUrl=avatarUrl
            this.username=username
            this.nickname=nickname
            // 把数据库中查询的用户信息放入用户信息修改表单
            this.userForm=res.data
            // console.log('user:',user);
        },
        // 修改个人信息
        updateUserInfo(){
            this.userInfoFormVisible=true
        },
        handleAvatarSuccess(res) {
            console.log('成功更新');
            this.imgSrc=res
            this.userForm.avatarUrl = res
        },
        // 修改密码
        updatePassword(){
            this.updateMima=true
        },
        async load(){
            this.stateList=localStorage.getItem('state_list')?JSON.parse(localStorage.getItem('state_list')):[
                {name:'待发货',value:'未发货',isActive:true},
                {name:'待收货',value:'运输中',isActive:false},
                {name:'已完成',value:'已完成',isActive:false}
            ]
            this.stateList.forEach(item=>{
                if(item.isActive==true){
                    this.orderState=item.value
                }
            })
            // 获取用户完整信息
            this.user=JSON.parse(sessionStorage.getItem('user'))
            let token=this.user.token
            this.userId =getUserId(token)
            // console.log(this.orderUser);
            let res=await this.request.get('/order/state',{
                params:{
                    orderUser:this.userId,
                    orderState:this.orderState,
                }
            })
            if(res.data){
                this.orderList=res.data
                let arr=this.orderList
                arr.map(function(item){

                })
                console.log(this.orderList)
            }else{
                console.log('数据库中查询无果！');
            }
            
            // console.log(this.orderUser,this.orderState);
           
        },
        // 去往购物车
        goto(index){
            this.$message.warning('功能还没有开发哦~~')
        },
        //#region (收货地址)
        /**省市区三级联动 */
        addressChoose(value) {
            // console.log("地址", value);
            // console.log('省市区：',CodeToText[value[0]],CodeToText[value[1]],CodeToText[value[2]]);
            this.form.province=CodeToText[value[0]]+'/'+CodeToText[value[1]]+'/'+CodeToText[value[2]]
        },
        // 新建地址
        addAddress(){
            this.operation='新建'
            if(this.addressList.length<3){
                this.dialogFormVisible=true
            }else{
                this.dialogFormVisible=false
                this.$message.warning('最多只能存放三条地址哦~~')
            }
        },
        // 表单取消
        cancle(){
            this.dialogFormVisible=false
        },
        // 表单确定
        sure(){
            if(this.operation=='新建'){
                let addressObj={}
                addressObj=this.form
                this.dialogFormVisible=false
                this.addressList.unshift(addressObj)
                this.$message.success('新建成功！')
                localStorage.setItem('address_list',JSON.stringify(this.addressList))
                // console.log(this.form);
            }else{
                this.addressList[this.editFlag].province=this.form.province
                this.addressList[this.editFlag].address=this.form.address
                this.addressList[this.editFlag].name=this.form.name
                this.addressList[this.editFlag].phoneNumber=this.form.phoneNumber
                this.$message.success('修改成功！')
                localStorage.setItem('address_list',JSON.stringify(this.addressList))
                this.operation=''
                this.editFlag=0
                this.dialogFormVisible=false
            }
            
        },
        // 编辑地址
        editAddress(index){
            this.dialogFormVisible=true
            this.operation='修改'
            this.editFlag=index
            this.form.address=this.addressList[this.editFlag].address
                this.form.name=this.addressList[this.editFlag].name
                this.form.phoneNumber=this.addressList[this.editFlag].phoneNumber
            console.log(this.addressList[index]);

        },
        // 删除地址
        handleDelete(index){
            console.log('删除前:',this.addressList);
            this.addressList.splice(index,1)
            console.log('删除前:',this.addressList);
            localStorage.setItem('address_list',JSON.stringify(this.addressList))
            this.addressList=JSON.parse(localStorage.getItem('address_list'))

        },
        //#endregion
        
        //#region (查看订单)
        // 获取订单(待发货、待收货、已完成)
        getOrder(index){
            this.stateList.map(item=>item.isActive=false)
            this.stateList[index].isActive=true
            localStorage.setItem('state_list',JSON.stringify(this.stateList))
            this.load()
        },
        //#endregion

        // 获取日期时间
        getTime() {
		      this.time['yy'] = new Date().getFullYear()
		      this.time['mm'] = new Date().getMonth()+1<10?'0'+(new Date().getMonth()+1):new Date().getMonth()+1
		    //   this.time['dd'] = new Date().getDate()
              this.time['dd'] = new Date().getDate()<10?'0'+new Date().getDate():new Date().getDate()
		      this.time['hh'] = new Date().getHours()
		      this.time['mf'] = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes()
		      this.time['ss'] = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds()
              //获取当前时间
		      let myDate = new Date()  
              let wk = myDate.getDay()
              let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
              let week = weeks[wk]  
              this.time['week']=week
		    //   let str = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
		    //   console.log('str:',str)
		},
    },
    mounted(){
        this.getUser()
        this.load()
        this.addressList=localStorage.getItem('address_list')?JSON.parse(localStorage.getItem('address_list')):[]
        this.user=localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
        this.getTime()
    }   
}
</script>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
}

.my_order{
    margin-top: 2vw;
    margin-bottom: 2vw;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: rgb(245,245,245);
    .main{
        display: flex;
        width: 90%;
        min-height: 42.5vw;
        justify-content: space-between;
        // 主体区域左侧
        .main_left{
            // padding-left: 10px;
            width: 20%;
            height: 40vw;
            display: flex;
            background-color: white;
            flex-direction: column;
            .person{
                width: 100%;
                height: 16.12vw;
                padding: 2.62vw 1.31vw;
                background-color: rgb(255,243,230);
                border-radius: 10px 10px 10px 10px;
                // display: flex;
                // flex-direction: column;
                // border-bottom: 1px solid #999;
                .avatar{
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 5%;
                    img{
                        width:5.3vw;
                        border-radius: 50%;
                    }
                }
                .username,.nickname{
                    text-align: center;
                    margin-bottom: 1.31vw;
                    margin: 0 auto;
                    // margin-left: 10%;
                    font-size: 1.2vw;
                }
                .username{
                    font-size: 1.6vw;
                }
                .updateUser{
                    margin-left: 10%;
                    text-align: center;
                    color: #ff6700;
                    font-size: 1vw;
                    cursor: pointer;
                }
                // 修改个人信息提交表单
                .avatar-uploader {
                    width: 138px;
                    height: 138px;
                    border: 1px solid #999;
                    margin-bottom: 5px;
                    text-align: center;
                    padding-bottom: 10px;
                    // .el-upload {
                    //     border: 1px dashed #d9d9d9;
                    //     border-radius: 6px;
                    //     cursor: pointer;
                    //     position: relative;
                    //     overflow: hidden;
                    // }
                    // .el-upload:hover {
                    //     border-color: #409EFF;
                    // }
                    .avatar-uploader-icon {
                        font-size: 28px;
                        color: #8c939d;
                        width: 138px;
                        height: 138px;
                        line-height: 138px;
                        text-align: center;
                    }
                    .avatar {
                        width: 138px;
                        height: 138px;
                        display: block;
                    }
                }
            }
            .abilities{
                margin-top: 10px;
                width: 100%;
                padding-left: 10%;
                display: flex;
                flex-direction: column;
                 .ability{
                    width: 100%;
                    height: 2vw;
                    line-height: 2vw;
                    font-size: 1.2vw;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    cursor: pointer;
                }
            }
            // .set{
            //     cursor: pointer;
            //     margin-bottom: 10px;
            //     text-align: center;
            //     margin-top: 10px;
            //     font-size: 1.4vw;
            //     .iconfont{
            //         margin-right: 5px;
            //     }
            // }
            
        }
        // 主体区域中间
        .main_middle{
            border: 1px solid #999;
            width: 60%;
            min-height: 26.33vw;
            display: flex;
            flex-direction: column;
            // 中间头部
            .middle_top{
                width: 100%;
                height: 12vw;
                /* background-color: pink; */
                display: flex;
                background-color: rgb(47,176,149);
                overflow: hidden;
                .person_address{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    // 收货地址
                    .address_list{
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        justify-content: space-evenly;
                        overflow: auto;
                        .address_item{
                            margin-left: 2%;
                            width: 96%;
                            height: 30%;
                            overflow: hidden;
                            display: flex;
                            font-size: 1vw;
                            border-radius: 10px;
                            background-color: white;
                            .item_text{
                                width: 80%;
                                padding-left: 5px;
                                display: flex;
                                font-size: 1vw;
                                align-items: center;
                            }
                            .item_operation{
                                padding-right: 5px;
                                width: 20%;
                                display: flex;
                                justify-content: right;
                                align-items:center;
                            }
                        }
                    }
                }
            }
            // 中间主体
            .middle_body{
                flex: 1;
                display: flex;
                flex-direction: column;
                // 订单状态
                .state_list{
                    width: 100%;
                    height: 40px;
                    /* background-color: skyblue; */
                    display: flex;
                    border: 1px solid #999;
                    border-left: none;
                    border-right: none;
                    background-color: white;
                    .state{
                        width: 33.33%;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        display: block;
                        text-decoration: none;
                        color: black;
                    }
                    .active{
                        /* background-color: rgb(245,245,245); */
                        color: #55b46c;
                        font-weight: bold;
                    }
                }
                // 订单列表
                .order_list{
                    box-sizing: border-box;
                    padding-top: 5px;
                    width: 100%;
                    height: 35vw;
                    // display: flex;
                    // flex-direction: column;
                    overflow: auto;
                    .order_item{
                        margin-left: 2%;
                        padding-left: 10px;
                        width: 96%;
                        height: 6vw;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        background-color:white;
                        margin-bottom: 1vw;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
        // 主体区域右侧
        .main_right{
            width: 16%;
            height: 26.33vw;
            display: flex;
            flex-direction: column;
            .my_calendar{
                box-sizing: content-box;
                width: 100%;
                height: 13.17vw;
                display: flex;
                flex-direction: column;
                border: 1px solid  #55b46c;
            }
        }

    }
}


















</style>